<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表功能测试</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .chart-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            padding: 20px;
        }
        .chart {
            width: 100%;
            height: 400px;
        }
        h2 {
            color: #303133;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>ECharts 图表功能测试</h1>
    
    <div class="chart-container">
        <h2>饼图测试</h2>
        <div id="pieChart" class="chart"></div>
    </div>
    
    <div class="chart-container">
        <h2>折线图测试</h2>
        <div id="lineChart" class="chart"></div>
    </div>
    
    <div class="chart-container">
        <h2>树形图测试</h2>
        <div id="treeChart" class="chart"></div>
    </div>
    
    <div class="chart-container">
        <h2>雷达图测试</h2>
        <div id="radarChart" class="chart"></div>
    </div>
    
    <div class="chart-container">
        <h2>关系图测试</h2>
        <div id="graphChart" class="chart"></div>
    </div>

    <script>
        // 初始化饼图
        const pieChart = echarts.init(document.getElementById('pieChart'));
        const pieOption = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '任务状态',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 35, name: '进行中' },
                        { value: 25, name: '已完成' },
                        { value: 20, name: '待开始' },
                        { value: 20, name: '已暂停' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        pieChart.setOption(pieOption);

        // 初始化折线图
        const lineChart = echarts.init(document.getElementById('lineChart'));
        const lineOption = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '日志数量',
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210],
                    smooth: true,
                    areaStyle: {
                        opacity: 0.3
                    }
                }
            ]
        };
        lineChart.setOption(lineOption);

        // 初始化树形图
        const treeChart = echarts.init(document.getElementById('treeChart'));
        const treeOption = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    type: 'tree',
                    data: [
                        {
                            name: '总公司',
                            children: [
                                {
                                    name: '技术部',
                                    children: [
                                        { name: '前端组' },
                                        { name: '后端组' },
                                        { name: '测试组' }
                                    ]
                                },
                                {
                                    name: '市场部',
                                    children: [
                                        { name: '销售组' },
                                        { name: '推广组' }
                                    ]
                                }
                            ]
                        }
                    ],
                    top: '5%',
                    left: '7%',
                    bottom: '2%',
                    right: '20%',
                    symbolSize: 7,
                    orient: 'vertical',
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 12
                    },
                    leaves: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    },
                    emphasis: {
                        focus: 'descendant'
                    },
                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        };
        treeChart.setOption(treeOption);

        // 初始化雷达图
        const radarChart = echarts.init(document.getElementById('radarChart'));
        const radarOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ['管理员', '部门主管', '普通用户']
            },
            radar: {
                indicator: [
                    { name: '系统管理', max: 100 },
                    { name: '用户管理', max: 100 },
                    { name: '权限管理', max: 100 },
                    { name: '日志查看', max: 100 },
                    { name: '数据导出', max: 100 }
                ]
            },
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            name: '管理员',
                            value: [90, 85, 95, 80, 75]
                        },
                        {
                            name: '部门主管',
                            value: [70, 80, 60, 85, 70]
                        },
                        {
                            name: '普通用户',
                            value: [30, 40, 50, 60, 45]
                        }
                    ]
                }
            ]
        };
        radarChart.setOption(radarOption);

        // 初始化关系图
        const graphChart = echarts.init(document.getElementById('graphChart'));
        const graphOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ['管理员', '部门主管', '普通用户', '访客']
            },
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    data: [
                        { name: '管理员', value: 20, category: 0 },
                        { name: '部门主管', value: 15, category: 1 },
                        { name: '普通用户', value: 10, category: 2 },
                        { name: '访客', value: 5, category: 3 }
                    ],
                    links: [
                        { source: '管理员', target: '部门主管', value: 1 },
                        { source: '部门主管', target: '普通用户', value: 1 },
                        { source: '普通用户', target: '访客', value: 1 },
                        { source: '管理员', target: '普通用户', value: 1 }
                    ],
                    roam: true,
                    label: {
                        show: true,
                        position: 'right'
                    },
                    force: {
                        repulsion: 100
                    }
                }
            ]
        };
        graphChart.setOption(graphOption);

        // 响应式处理
        window.addEventListener('resize', () => {
            pieChart.resize();
            lineChart.resize();
            treeChart.resize();
            radarChart.resize();
            graphChart.resize();
        });
    </script>
</body>
</html>
